昨天我們設計好了 User 與 Order Schema，今天要讓顧客能在 LINE 上直接看到「商品選單」。

LINE 提供的 Flex Message 可以自由排版文字、圖片、按鈕，是打造互動選單的最佳方式。

本文將介紹 Flex Message 的結構，並示範如何建立一個簡單的商品卡片與商品清單。

什麼是 Flex Message？

• 客製化卡片訊息：用 JSON 定義訊息版型。

• 支援多種元素：文字、圖片、按鈕、分隔線。

• 應用場景：商品選單、訂單摘要、通知卡片。

• 官方 Playground：Flex Message Simulator。

Flex Message 的結構（依官方文件）

Flex Message 採三層結構：Container → Block → Component（官方文件稱「階層式結構」）。

1) Container（容器）

• bubble：單張訊息卡。

• carousel：多張 bubble 並排，可左右滑動。

2) Block（卡片區塊）

• header：標題或抬頭。

• hero：主視覺（通常是圖片或影片）。

• body：主要內容。

• footer：操作按鈕與補充資訊。

區塊的擺放順序為 header → hero → body → footer；同一個 bubble 每種 block 最多各 1 次，也可以只用其中幾個（不是必填）。

3) Component（元件）

• box：版面容器，決定排列方向 horizontal、vertical、baseline（類似 CSS flexbox）。

• text / span：文字與行內樣式（span 可混搭不同字型樣式）。

• image / video：圖片與影片（影片常放在 hero）。

• button：按鈕，需綁定 action（如 message、postback、uri）。

• icon：與文字對齊的小圖示（僅能放在 baseline box 裡）。

• separator：分隔線。

• filler：空白填充（已標示為 deprecated）。

版面重點（Layout 摘要）

• box.layout 影響可放哪些子元件；baseline 僅支援 icon/text/span 等，horizontal/vertical 則可放大多數元件。

• flex 會依比例分配寬/高（與 CSS flex 類似）；flex: 0 代表以內容寬/高為主。

更多細節可參考官方文件：

• Flex Message elements（層級、元件）：https://developers.line.biz/en/docs/messaging-api/flex-message-elements/

• Flex Message layout（版面與 flex 規則）：https://developers.line.biz/en/docs/messaging-api/flex-message-layout/

建立單一商品卡片

範例 JSON：

{
  "type": "bubble",
  "body": {
    "type": "box",
    "layout": "vertical",
    "contents": [
      { "type": "text", "text": "紅茶拿鐵", "weight": "bold", "size": "xl" },
      { "type": "text", "text": "$60", "color": "#AAAAAA", "size": "sm" }
    ]
  },
  "footer": {
    "type": "box",
    "layout": "horizontal",
    "contents": [
      {
        "type": "button",
        "action": { "type": "message", "label": "下單", "text": "我要紅茶拿鐵" }
      }
    ]
  }
}

👉 使用者點「下單」後，會自動傳送「我要紅茶拿鐵」訊息給 Bot。

建立商品 Carousel

如果要展示多個商品，可以使用 carousel：

{
  "type": "carousel",
  "contents": [ bubble1, bubble2, bubble3 ]
}

這樣就能一次顯示多個商品卡片，讓顧客滑動選擇。

在程式中回覆 Flex Message

在 index.js 中使用 LINE SDK：

client.replyMessage(event.replyToken, {
  type: "flex",
  altText: "商品選單",
  contents: {
    type: "carousel",
    contents: [ bubble1（第一張商品卡片 JSON）、bubble2（第二張商品卡片 JSON） ]
  }
});

• altText：必要欄位，供不支援 Flex Message 的裝置顯示。

• bubble1（第一張商品卡片 JSON）、bubble2（第二張商品卡片 JSON）：前面定義好的 JSON 卡片。

開發小提醒

• 建議先用 Flex Message Simulator 編輯 JSON，再貼到程式中。

• 按鈕的 action 有兩種常用方式：

  • message：回傳文字訊息（簡單直觀）。

  • postback：回傳隱藏資料給後端（適合正式訂單流程）。

• 初期可以先用 message，Day 10 我們會把流程串起來。

總結與重點回顧

今天我們完成了：

• 認識 Flex Message 的結構。

• 建立商品卡片與商品清單 (Carousel)。

• 在程式中回覆 Flex Message，讓顧客能在 LINE 上直接互動。

重點回顧：

• Flex Message 是商品選單的最佳工具。

• JSON 定義結構清晰，先用 Simulator 測試最有效率。

• 按鈕 action 可以是文字回傳，也可以是 postback。

明天（Day 10），我們要開始建立 完整訂單流程：商品 → 數量 → 確認 → 送出！

參考

LINE Flex Message Simulator
LINE Using Flex Messages Docs